<template>
  <div>
    <!-- 商品展示 -->
    <div class="shopping">
        <div class="title-img">
        <img src="../../assets/img/like.webp" alt="" />
      </div>
      <div class="content">
        <ul>
          <li
            v-for="(item, index) in goods"
            :key="index"
            @click="goDetail(item.goods_id)"
          >
            <div class="shopping-img">
              <img :src="item.goods_small_logo" alt="" />
            </div>
            <div class="message">
              <div class="shopping-name">
                {{ item.goods_name }}
              </div>
              <div class="pin-info-price">
                <div class="price">{{ item.goods_price}}</div>
                <div class="collect">
                  销量{{ Math.floor((Math.random()*100)+1) }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios  from "axios";
export default {
    data() {
        return {
            goods:[], // 商品
        }
    },
    methods:{
        api(){
            return "https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=";
        },
        // 商品
        getGoods(name="衣服",index=0){
            this.conId = index
            axios
              .get(this.api()+name)
              .then(data => {
                  let goods = data.data.message.goods
                  this.goods = goods.filter(item=>{
                      return item.goods_small_logo != ""
                  })
              })
              .catch(function (error) {
                console.log(error);
            });
        },
        goDetail(id){
            this.$router.push({name:'Details',query: {goods_id:id}})
        },
    },
    created(){
        this.getGoods()
    },
}
</script>

<style lang="less" scoped>
.navBarWrap {
    position:fixed;
    top:75px;
    z-index:999;
    background: #fff;
    width: 100%;
}
    // 商品展示
    .shopping{
        .title-img{
            img{
                width: 100%;
            }
        }
        .content{
            ul{
                overflow: hidden;
                padding-right: 15px;
                li{
                    width: 296px;
                    float: left;
                    // height: 532px;
                    background: #fff;
                    margin: 15px 0px 0px 15px;
                    .shopping-img{
                        height: 396px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .message{
                        width: 276px;
                        // height: 119px;
                        padding:8px 10px;
                        .shopping-name{
                            height: 56px;
                            color: #333;
                            font-size: 20px;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-box-orient:vertical;
                            -webkit-line-clamp:2;
                        }
                        .pin-info-price{
                            height: 42px;
                            .price{
                                line-height: 42px;
                                float: left;
                                font-size: 26px;
                                font-weight: bold;
                                color: #FF4466;
                                position: relative;
                                padding-left: 10px;
                                &::before{
                                    display: block;
                                    content: "￥";
                                    position: absolute;
                                    left: -6px;
                                    top: 2px;
                                    font-size: 18px;
                                    font-weight: bolder;
                                }
                            }
                            .collect{
                                float: right;
                                color: #FF4B6B;
                                font-size: 16px;
                                background: #FFECEF;
                                border-radius: 30px;
                                padding: 5px 10px;
                                margin: 5px 0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
